<template>
  <div flex flex-col justify-center items-center absolute bottom-40px left-60px>
    <!-- <div w-400px h-400px flex justify-center items-center class="shouhuan-bg">
      <img src="@/assets/images/shouhuan.png" w-300px h-400px alt="" />
    </div> -->
    <div font-bold text="#fff" text-48px my-20px>此处刷手环/卡</div>
    <img w-80px h-100px class="jiantou" src="@/assets/images/bottom_jiantou.png" alt="向下箭头" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
</script>

<style scoped>
.shouhuan-bg {
  background: url('@/assets/images/shouhuan_bg.png') no-repeat center;
}
.jiantou {
  animation: float 1s ease-in-out infinite alternate;
}

@keyframes float {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-20px);
  }
}
</style>
